<!--
 * @Autor: Hongting Yuan
 * @Date: 2021-12-02 15:40:51
 * @LastEditors: Haiting Zhao
 * @LastEditTime: 2021-12-19 12:54:21
 * @Description: 用户第一次登录新手教程vedio组件
 * @FilePath: \Management-of-Scientific-Research-in-Universities-Front\src\components\Novicetutorial\Teach.vue
-->

<template>
  <div class="mainPage">
    <!-- vedio播放器 -->
    <div ref="mainContent" class="mainContent">
      <div style="text-align: center; font-size: 50px; font-weight: bolder; color: rgb(92, 194, 207);"><span>新手教程</span></div>
      <video-player
        id="videoPlayer"
        ref="videoPlayer"
        class="video-player vjs-custom-skin"
        webkit-playsinline="true"
        x-webkit-airplay="true"
        playsinline
        :options="playerOptions"
        :events="playerEvents"

        @canplay="onPlayerCanPlay($event)"
        @playing="onCanPlaying($event)"
        @pause="onPlayerPause($event)"
        @ended="onPlayerEnded($event)"
        @timeupdate="onPlayerTimeUpdated($event)"
        @statechanged="onPlayerStateChanged($event)"
        @fullscreenchange="onFullScreenChanged($event)"
      />
    </div>
    <!-- 播放完新手教程弹框进入主页 -->
    <el-dialog
      title="提示"
      :visible.sync="centerDialogVisible && this.$store.getters.getnewuser==2"
      width="30%"
    >
      <span>进入主页，开始使用？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enterHome">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 第一次登录弹框跳过新手教程直接使用 -->
    <el-dialog
      title="提示"
      :visible.sync="noTeachDialogVisible && this.$store.getters.getnewuser==2"
      width="30%"
    >
      <span>是否跳过教程,开始使用？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noTeachDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="enterHome">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import crypto from '../../crypto/crypto'
import axios from 'axios'
export default {
  name: 'Teach',
  data() {
    return {
      // 播放完成弹框
      centerDialogVisible: false,
      // 跳过教程弹框
      noTeachDialogVisible: true,
      playerEvents: ['fullscreenchange'],
      playerOptions: {
        // controls:false,
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: 'https://spring-study.obs.cn-southwest-2.myhuaweicloud.com:443/%E6%B5%8B%E8%AF%95%E9%A1%B9%E7%9B%AE/%E6%96%B0%E6%89%8B%E6%95%99%E7%A8%8B.mp4?AccessKeyId=YUOGAXLRWREZMSAHQPRZ&Expires=1669527294&Signature=4x1qUJYvYyQIxidjYMDrNKkg4vo%3D' // url地址
        }],
        poster: '../../assets/img/404.png', // 你的封面地址

        // width: window.screen.width, // 播放器宽度
        // height: (window.screen.width * 9) / 30,
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 不显示时间分割线‘/’，因为要把剩余时间放到进度条右边
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true // 全屏按钮
        }
      }
    }
  },
  created() {
    // console.log('this1', this.$store.getters.getnewuser)
  },
  methods: {
    /**
     * @description: 点击刚进入或播放完成时弹框的确定进入主页
     * @param {*}
     * @return {*}
     * @author: Hongting Yuan
     */
    enterHome() {
      this.centerDialogVisible = false
      this.noTeachDialogVisible = false
      // this.$router.push('../views/myproject/Workplace')
      // this.$router.push('/' + crypto.set('2'))

      axios.get(`/user/confirmNewUser?userId=${this.$store.getters.getuserId}`)
        .then(res => {
          // console.log('新手', res)
          if (res.status === 403) {
            this.$router.push('/' + crypto.set('43'))
          } else if (res.status === 404) {
            this.$router.push('/' + crypto.set('44'))
          } else if (res.status > 200) {
            this.$router.push('/' + crypto.set('45'))
          }
        })
        .catch(err => {
          console.error(err)
        })
      this.$store.commit('setnewuser', 1)
      // console.log('thisend', this.$store.getters.getnewuser)
    },
    // 监听播放
    onPlayerCanPlay(event) {
      // console.log(11111)
    },
    // 正在播放
    onCanPlaying(event) {
      // console.log(22222222)
    },
    // 监听暂停
    onPlayerPause(event) {
      // console.log(3333333)
    },
    // 结尾
    onPlayerEnded(event) {
      this.centerDialogVisible = true
    },
    // 播放位置改变
    onPlayerTimeUpdated(event) {
      // console.log(4444)
    },
    // 监听播放状态改变
    onPlayerStateChanged(event) {
      // console.log(5555555)
    },
    // 全屏状态改变
    onFullScreenChanged(event) {
      // console.log(66666)
    }
  }
}
</script>
<style lang='scss'>
  .mainPage{
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
  }
</style>
